<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; 
charset=UTF-8">
<title>GRAYSCALE.js</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="grayscale.js"></script>
<link href="css.css" rel="stylesheet">
</head>

<body class="js" style="">


<div id="contain">
  <!-- <body content> -->
  <h2 style="color: black; opacity: 0.6;">
  	<a href="http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/" target="_blank">
  		grayscale.js Demo
  		</a>
  		</h2>
  <h2
 style="color: yellow; opacity: 1; position: absolute; top: 28.6px; 
left: -2px; width: 990px;">
<a href="http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/" target="_blank">
	grayscale.js Demo
</a>
	</h2>
  <div><a class="button" href="#">Click to toggle Grayscale!</a>
    <ul class="colorlist">
      <li style="background-color: red;"></li>
      <li
 style="background-color: yellow;"></li>
      <li style="background-color: 
brown;"></li>
      <li style="background-color: green;"></li>
      <li 
style="background-color: orange;"></li>
      <li style="background-color: 
blue;"></li>
      <li style="background-color: maroon;"></li>
      <li 
style="background-color: red;"></li>
      <li style="background-color: 
yellow;"></li>
      <li style="background-color: brown;"></li>
      <li 
style="background-color: green;"></li>
      <li style="background-color: 
orange;"></li>
      <li style="background-color: blue;"></li>
      <li 
style="background-color: maroon;"></li>
      <li style="background-color: 
red;"></li>
    </ul>
    <img src="1.jpg">
    <ul 
class="colorlist">
      <li style="background-color: red;"></li>
      <li 
style="background-color: yellow;"></li>
      <li style="background-color: 
brown;"></li>
      <li style="background-color: green;"></li>
      <li 
style="background-color: orange;"></li>
      <li style="background-color: 
blue;"></li>
      <li style="background-color: maroon;"></li>
      <li 
style="background-color: red;"></li>
      <li style="background-color: 
yellow;"></li>
      <li style="background-color: brown;"></li>
      <li 
style="background-color: green;"></li>
      <li style="background-color: 
orange;"></li>
      <li style="background-color: blue;"></li>
      <li 
style="background-color: maroon;"></li>
      <li style="background-color: 
red;"></li>
    </ul>
    <p style="background: url(&quot;img/grad1.png&quot;) 
repeat-x scroll 0% 0% rgb(130, 36, 37);">Lorem ipsum dolor sit amet, 
      consectetur adipiscing elit. Nunc in purus orci. Vivamus non mi neque, a
      fermentum sapien. Morbi accumsan ultrices urna nec tincidunt. Sed 
      venenatis dictum facilisis. Nunc nec dolor nec nisl tempus consequat a 
      non risus.</p>
  </div>
  <div><a class="button" href="#">Click to toggle Grayscale!</a>
    <ul class="colorlist">
      <li style="background-color: red;"></li>
      <li
 style="background-color: yellow;"></li>
      <li style="background-color: 
brown;"></li>
      <li style="background-color: green;"></li>
      <li 
style="background-color: orange;"></li>
      <li style="background-color: 
blue;"></li>
      <li style="background-color: maroon;"></li>
      <li 
style="background-color: red;"></li>
      <li style="background-color: 
yellow;"></li>
      <li style="background-color: brown;"></li>
      <li 
style="background-color: green;"></li>
      <li style="background-color: 
orange;"></li>
      <li style="background-color: blue;"></li>
      <li 
style="background-color: maroon;"></li>
      <li style="background-color: 
red;"></li>
    </ul>
    <img src="4.jpg">
    <ul 
class="colorlist">
      <li style="background-color: red;"></li>
      <li 
style="background-color: yellow;"></li>
      <li style="background-color: 
brown;"></li>
      <li style="background-color: green;"></li>
      <li 
style="background-color: orange;"></li>
      <li style="background-color: 
blue;"></li>
      <li style="background-color: maroon;"></li>
      <li 
style="background-color: red;"></li>
      <li style="background-color: 
yellow;"></li>
      <li style="background-color: brown;"></li>
      <li 
style="background-color: green;"></li>
      <li style="background-color: 
orange;"></li>
      <li style="background-color: blue;"></li>
      <li 
style="background-color: maroon;"></li>
      <li style="background-color: 
red;"></li>
    </ul>
    <p style="background: url(&quot;img/grad2.png&quot;) 
repeat-x scroll 0% 0% rgb(8, 88, 111);">Lorem ipsum dolor sit amet, 
      consectetur adipiscing elit. Nunc in purus orci. Vivamus non mi neque, a
      fermentum sapien. Morbi accumsan ultrices urna nec tincidunt. Sed 
      venenatis dictum facilisis. Nunc nec dolor nec nisl tempus consequat a 
      non risus.</p>
  </div>
  <div><a class="button" href="#">Click to toggle Grayscale!</a>
    <ul class="colorlist">
      <li style="background-color: red;"></li>
      <li
 style="background-color: yellow;"></li>
      <li style="background-color: 
brown;"></li>
      <li style="background-color: green;"></li>
      <li 
style="background-color: orange;"></li>
      <li style="background-color: 
blue;"></li>
      <li style="background-color: maroon;"></li>
      <li 
style="background-color: red;"></li>
      <li style="background-color: 
yellow;"></li>
      <li style="background-color: brown;"></li>
      <li 
style="background-color: green;"></li>
      <li style="background-color: 
orange;"></li>
      <li style="background-color: blue;"></li>
      <li 
style="background-color: maroon;"></li>
      <li style="background-color: 
red;"></li>
    </ul>
    <img src="3.jpg">
    <ul 
class="colorlist">
      <li style="background-color: red;"></li>
      <li 
style="background-color: yellow;"></li>
      <li style="background-color: 
brown;"></li>
      <li style="background-color: green;"></li>
      <li 
style="background-color: orange;"></li>
      <li style="background-color: 
blue;"></li>
      <li style="background-color: maroon;"></li>
      <li 
style="background-color: red;"></li>
      <li style="background-color: 
yellow;"></li>
      <li style="background-color: brown;"></li>
      <li 
style="background-color: green;"></li>
      <li style="background-color: 
orange;"></li>
      <li style="background-color: blue;"></li>
      <li 
style="background-color: maroon;"></li>
      <li style="background-color: 
red;"></li>
    </ul>
    <p style="background: url(&quot;img/grad3.png&quot;) 
repeat-x scroll 0% 0% rgb(69, 119, 32);">Lorem ipsum dolor sit amet, 
      consectetur adipiscing elit. Nunc in purus orci. Vivamus non mi neque, a
      fermentum sapien. Morbi accumsan ultrices urna nec tincidunt. Sed 
      venenatis dictum facilisis. Nunc nec dolor nec nisl tempus consequat a 
      non risus.</p>
  </div>
</div>
<!-- </body content> -->
<script type="text/javascript">
        
            /* All this stuff is just for the demo */
            
            window.onload = function(){
                // jQuery is not required for grayscale.js - it's only used for the demo:
                if (document.createElement('canvas').getContext && !document.createElement('canvas').getContext('2d').getImageData) {
                    $('<p><strong>WARNING</strong>: The browser you\'re using (probably Chrome) does not support an important feature which makes it possible to make images grayscale. Please use a fully featured browser such as FF or Safari!</p>').appendTo('#msg');
                }
                $('<a id="infobutton" href="#">Bring back the info</a>')
                    .hide()
                    .click(function(){
                        $('#msg').fadeIn(300);
                        $('#over').show().fadeTo(300, 0.7);
                        $('#infobutton').fadeOut(300);
                        return false;
                    }).appendTo('body');
                $('<p/>').append($('<a href="#">See the Demo! [close]</a>').click(function(){
                    $('#over,#msg').fadeOut(300);
                    $('#infobutton').fadeIn(300);
                    return false;
                    
                })).appendTo('#msg');
                
                var h2 = $('h2');
                h2.css({
                        color: 'black',
                        opacity: '0.6'
                    })
                    .clone()
                    .css({
                        position : 'absolute',
                        top : h2.position().top-2,
                        left : '-2px',
                        color : 'yellow',
                        width: h2.width(),
                        opacity: 1
                    })
                    .insertAfter(h2);
                    
                var colorUL = $('<ul class="colorlist"/>').append((function(){
                    var colors = ['red','yellow','brown','green','orange','blue','maroon','red','yellow','brown', 'green','orange','blue','maroon','red'],
                        html = [];
                    $.each(Array(15), function(i){
                        html[html.length] = '<li style="background-color:' + (colors[i]) + ';"></li>';
                    });
                    return html.join('');
                })());
                
                $('img', '#contain').each(function(){
                    $(this)
                        .before(colorUL.clone())
                        .after(colorUL.clone());
                });
                $('a.button','#contain').toggle(function(){
                    grayscale(this.parentNode);
                }, function(){
                    grayscale.reset(this.parentNode);
                })
                grayscale.prepare($('#contain div'));
            };
        </script>
<a style="display: block;" id="infobutton" href="#">Bring back the 
info</a>
</body>
</html>